<template>
  <div class="commonCon">
    <el-input class="iptS" v-model="seachV" placeholder="请输入用户名或手机号" clearable></el-input>
    <el-select v-model="seachVN" placeholder="请选择" clearable>
      <el-option v-for="item in options" :key="item.value" :label="item.value" :value="item.value"></el-option>
    </el-select>
    <el-button type="primary" @click="search">搜索</el-button>
    <el-button type="primary" @click="portD">导出</el-button>
    <el-table :data="
        tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)
      " border style="width: 100%">
      <!-- <el-table-column prop="nikeName" label="昵称" align="center"></el-table-column> -->
      <el-table-column prop="name" label="姓名" align="center"></el-table-column>
      <el-table-column prop="phone" label="手机号" align="center"></el-table-column>
      <el-table-column prop="prizeName" label="奖品" align="center"></el-table-column>
      <el-table-column prop="showAtime" label="抽奖时间" align="center"></el-table-column>
    </el-table>
    <div class="page">
      <div class="pb">
        <el-pagination :current-page.sync="currentPage" :page-size="pagesize" layout="prev, pager, next, jumper"
          :total="tableData.length"></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  function timestamp(timestamp) {
    // console.log(timestamp)
    timestamp = Number(timestamp);
    var date = new Date(timestamp);
    var y = date.getFullYear();
    var m = date.getMonth() + 1;
    m = m < 10 ? "0" + m : m;
    var d = date.getDate();
    d = d < 10 ? "0" + d : d;
    var h = date.getHours();
    h = h < 10 ? "0" + h : h;
    var minute = date.getMinutes();
    var second = date.getSeconds();
    minute = minute < 10 ? "0" + minute : minute;
    second = second < 10 ? "0" + second : second;
    return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
  }
  import table2excel from "js-table2excel";
  var allData = [];
  export default {
    props: {
      seeRecord:''
    },
    data() {
      return {
        tableData: [],
        currentPage: 1,
        pagesize: 5,
        seachV: "",
        options: [],
        seachVN: "",
      };
    },
    watch: {
      seeRecord: {
        // 执行方法
        handler(n, o) {
          // console.log('newVal-----', n, o)
          if (n) {
            this.getRecord(n);
          }
        },
        deep: true, // 深度监听
        immediate: true // 第一次改变就执行
      }
    },
    methods: {
      portD() {
        let that = this;
        let column = [
          // {
          //   title: "昵称",
          //   key: "nikeName",
          //   type: "text",
          // },
          {
            title: "姓名",
            key: "name",
            type: "text",
          },
          {
            title: "手机号",
            key: "phone",
            type: "text",
          },
          {
            title: "奖品名称",
            key: "prizeName",
            type: "text",
          },
          {
            title: "抽奖时间",
            key: "showAtime",
            type: "text",
          },
        ];
        // let dao = allData.filter((v) => {
        //   if (v.prizeName != "谢谢参与") return v;
        // });
        let dao = allData
        let filename = "中奖记录";
        if (filename.indexOf(".") != Number(-1)) {
          filename = filename + ".xls";
        }
        table2excel(column, dao, filename);
      },
      getRecord(id) {
        let oo = {
          id: id
        };
        this.$axios
          .get("/sbr/guess/getRecordByLottoryId", {
            params: oo
          })
          .then((res) => {
            let rr = res.data.data;
            let p = [];
            rr.forEach((v) => {
              v.showAtime = timestamp(v.addTime);
              if (v.prizeName != "谢谢参与") {
                let a = p.find((h) => {
                  return h.value == v.prizeName;
                });
                if (!a) p.push({
                  value: v.prizeName
                });
              }
            });
            console.log(p);
            this.options = p;
            this.tableData = rr;
            allData = rr;
          });
      },
      search() {
        if (this.seachV) {
          this.tableData = allData.filter((v) => {
            // entryNumber phone
            if (
              v.nikeName.indexOf(this.seachV) >= 0 ||
              v.entryNumber.indexOf(this.seachV) >= 0 ||
              v.phone.indexOf(this.seachV) >= 0
            ) {
              return v;
            }
          });
          if (this.seachVN) {
            this.tableData = this.tableData.filter((v) => {
              // entryNumber phone
              if (v.prizeName == this.seachVN) {
                return v;
              }
            });
          }
        } else {
          if (this.seachVN) {
            this.tableData = allData.filter((v) => {
              // entryNumber phone
              if (v.prizeName == this.seachVN) {
                return v;
              }
            });
          }
        }
        if (!this.seachV && !this.seachVN) {
          this.tableData = allData;
        }
      },
    },
    mounted() {
      let a = this.$route.fullPath.split("?");
      // console.log(a);
      if (a[1]) {
        a = this.$Base64.decode(a[1]);
        console.log(a);
        this.getRecord(a);
      }
    },
  };
</script>

<style scoped>
  .iptS {
    width: 300px;
  }

  .page {
    margin-top: 15px;
    overflow: hidden;
    width: 100%;
  }

  .page .pb {
    display: table;
    margin: 0 auto;
    overflow: hidden;
  }
</style>